﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>PickerBox</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="css/golbal.css" rel="stylesheet" type="text/css" />
    <link href="css/picker.css" rel="stylesheet" type="text/css" /> 
    <link href="css/easyui.css" rel="stylesheet" type="text/css" />
    <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script src="script/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="script/jquery.ztree.core-3.2.min.js" type="text/javascript"></script>
    <script src="script/jquery.query-2.1.7.js" type="text/javascript"></script>
    <script src="script/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="script/tree.js" type="text/javascript"></script>
    <script src="script/picker.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var p = {
                datagrid: {
                    columns: [[
					{ field: 'itemid', title: 'Item ID', width: 80, checkbox: true },
					{ field: 'productid', title: 'Product ID', width: 120 },
                    //	{ field: 'listprice', title: 'List Price', width: 80, align: 'right' },
                    //	{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right' },
					{field: 'attr1', title: 'Attribute', width: 250 }
                    //	{ field: 'status', title: 'Status', width: 60, align: 'center' }

				]],
                    url: "datagrid_data4.json",  //在这儿改成后台的地址把
                    pagination: true,
                    queryParams: { name: "helloworld"}
                },

                tag: {
                    columns:
                    [[
                        { name: "1号导航菜单", url: "datagrid_data1.json" },
                        { name: "2号导航菜单", url: "datagrid_data2.json" },
                        { name: "3号导航菜单", url: "datagrid_data3.json" }
                    ]],
                    queryurl: "datagrid_data2.json"
                }
            };

            picker.build(p);
        });
    </script>
</head>
<body>
    <div class="content">
        <div class="panel" style="width: 744px; *width: 727px;">
            <div class="panel-header" style="line-height: 20px; *line-height: 18px">
                <div class="panel-title" id ="panel-title">
                    
                </div>
                <div class="panel-tool">
                    <span class="searchbox">
                        <input type="text" id="searchText" class="searchbox-text searchbox-prompt" />查询:<span><span
                            class="searchbox-button" id="searchbtn"></span></span></span>
                </div>
            </div>
        </div>
        <div class="panel" style="width: 200px; float: left; margin-right: 10px;">
            <div style=" border-width: 1px" class="panel-body">
                <div class="grid-header" style="height: 249px;*height: 262px; line-height: 16px;">
                    <div id="treecontainer">
                        <ul id="tree" class="ztree">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel" style="float: left">
              <div style="border-width: 1px; width: 532px; *width: 515px;" class="panel-body">
                <div class="grid_body" id="grid_body">
                    <table id="pickergrid" ></table>
                </div>
            </div>
        </div>
        <div class="panel" style="width: 744px; *width: 727px;">
            <div class="panel-header">
                <div class="panel-title panel-with-icon">
                    已选择:<span style="color: Red" id="count">0</span>条记录
                </div>
               <div class="panel-icon icon-edit"></div>
<!--                <div class="panel-tool">-->
<!--                     <a id="deletebtn">删除</a> <a id="clearbtn">清空</a> -->
<!--                </div>-->
            </div>

          <div class='datagrid-wrap panel-body' style='padding:2px;'>
          <div class='datagrid-toolbar'>
             <a href='javascript:void(0)' style='float: left;' class='l-btn l-btn-plain' id="deletebtn"><span class='l-btn-left'><span class='l-btn-text icon-remove' style='padding-left:20px;'>删除</span></span></a> 
           
             <div class='datagrid-btn-separator'></div>
            <a href='javascript:void(0)' style='float: left;' class='l-btn l-btn-plain' id="clearbtn"><span class='l-btn-left'><span class='l-btn-text icon-reload' style='padding-left:20px;'>清空</span></span></a> 
           </div>

            <div style="padding: 5px;" class='datagrid-view'>
                <select id="box" multiple="multiple" class="box">
                </select>
            </div>
            </div>
        </div>
        <div style="text-align: center; clear: both; margin-top: 5px;">
            <a iconcls="icon-ok" class="l-btn" href="javascript:void(0)"><span class="l-btn-left"><span class="l-btn-text icon-ok"
                style="padding-left: 20px;" id="finish">确定</span></span></a>
<a iconcls="icon-cancel" class="l-btn" href="javascript:void(0)"><span class="l-btn-left"><span class="l-btn-text icon-cancel" style="padding-left: 20px;" id="cancel">关闭</span></span></a>
        </div>
    </div>
    <input value="" id="pickervalue" type="hidden" />
    <input value="" id="pickertext" type="hidden" />
 
</body>
</html>
